<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>首页</title>
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="libs/swiper/swiper-bundle.min.css">
    <script src="libs/requirejs/require.min.js" data-main="js/index"></script>

</head>

<body>
    <main>
        <div class="show-switch-container">
            <div class="show-switch">
                <div class="showbutton showbutton-select">漫展演出</div>
                <div class="showbutton">B站周边</div>
            </div>
        </div>
        <div class="banner-wrapper">
            <div class="swiper-container">
                <div class="swiper-wrapper">

                </div>
                <script type="text/html" id="swiper-template">
                {{each slides slide}}
                <div class="swiper-slide">
                    <img src="{{slide.pic}}" alt="">
                </div>
                {{/each}}
            </script>
                <ul class="swiper-pagination">

                </ul>
                <script type="text/html" id="swiper-pagination-template">
                {{each slides}}
                    <li class="swiper-pagination-bullet"></li>
                {{/each}}
            </script>

            </div>
        </div>
        <div class="selector-wrapper">
            <div class="wrapper city-selector-wrapper">
                <div class="title">城市:</div>
                <div class="selector-content">
                    <ul class="city-list"> </ul>

                    <script type="text/html" id="city-list-template">
                        <li class="first selector-item">全国</li>

                        <% for(let i = 0; i < citylist.length; i++){ %>
                            <% if(citylist[i].id == active){%>
                                <li class="selector-item active"><%= citylist[i].name %></li>
                            <% }else{ %>
                        <li class="selector-item"><%= citylist[i].name %></li>
                        <% }} %>
                    </script>

                </div>
            </div>
            <div class="wrapper type-selector-wrapper">
                <div class="title">类型:</div>
                <div class="selector-content">
                    <ul class="type-list"></ul>

                    <script type="text/html" id="type-list-template">
                        <li class="first selector-item active">全部类型</li>
                        <% for(let i = 1; i < typelist.length; i++){ %>
                        <li class="selector-item"><%= typelist[i].value %><span>(<%= typelist[i].project_num %>)</span></li>
                        <% } %>
                    </script>

                </div>
            </div>
            <div class="wrapper order-selector-wrapper">
                <div class="title">筛选:</div>
                <div class="selector-content">
                    <ul class="order-list"></ul>
                    <script type="text/html" id="order-list-template">
                        <li class="first selector-item active">全部时间</li>
                        <% for(let i = 1; i < orderlist.length; i++){ %>
                        <li class="selector-item"><%= orderlist[i].value %></li>
                        <% } %>
                    </script>

                </div>
            </div>
        </div>
        <div class="project-list-wrapper">
            <div class="project-list">
                <!-- <div class="project-list-item-img"
                            style="background-image: url(https://images.weserv.nl/?url=http://i0.hdslb.com/bfs/openplatform/202108/01sNjhT11628073742018.jpeg@350w_466h.jpeg);">
                        </div> -->
                <script type="text/html" id="project-list-template">
                    <% for(let i = 0; i < projectlist.length; i++){%>
                    <div class="project-list-item" data-id="<%= projectlist[i].id %>">
                        
                        <img class="project-list-item-img" src="{{projectlist[i].cover}}@350w_466h.jpeg">                        
                        <div class="project-list-item-detail">
                            <div class="detail-title"><%= projectlist[i].project_name %></div>
                            <div class="detail-time">
                                <span class="icon time-icon"></span>
                                <%= projectlist[i].tlabel %>
                            </div>
                            <div class="detail-address">
                                <span class="icon address-icon"></span>
                                <span class="venue-name-and-address"><%= projectlist[i].venue_name %></span>
                            </div>
                            <div class="project-list-item-price">
                            <% if(projectlist[i].is_free){ %>
                                <% $('.project-list-item-price').addClass('is-free') %>
                            <% } %>
                                <% if(!projectlist[i].is_sale&&!projectlist[i].is_price){ %>
                                    
                                    <span class="can-not-sale"><%= projectlist[i].sale_flag %></span>
                                <% } %>
                                <% if(projectlist[i].is_sale&&!projectlist[i].is_price){ %>
                                    <span class="can-not-sale"><%= projectlist[i].sale_flag %></span>
                                <% } %>
                                <% if(projectlist[i].is_sale && projectlist[i].is_price){ %>
                                    <div class="not-free">
                                        <span class="price-symbol">￥</span>
                                        <span class="price"><%= (projectlist[i].price_low)/100 %></span>
                                        <span class="start">起</span>
                                        <% if(!!projectlist[i].label){ %>
                                            <span class="promo-item"><%= projectlist[i].label %></span>
                                        <% } %>
                                        <% if(!!projectlist[i].promo){ %>
                                            <span class="promo-item"><%= projectlist[i].promo[0].type_name %></span>
                                        <% } %>
                                        <% if(projectlist[i].countdown !== '热卖中'){ %>
                                            <span class="list-end"><span class="list-end-icon"></span><%= projectlist[i].countdown %></span>
                                            <% } %>
                                    </div>
                                <% } %>
                            </div>
                        </div>
                    </div>
                    <% } %>
                </script>
                
            </div>
        </div>
    </main>
</body>

</html>